<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--应用样式 使用了locator不需要再写版本号-->
    <link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="webjars/jquery/jquery.js"></script>
    <script type="text/javascript" src="webjars/bootstrap/js/bootstrap.js"></script>
</head>
<body>
         <h1>文件上传</h1>
    <table id="table1" class="table" align="center">
        <tr>
            <td>文件:</td>
            <td><input type="file" id="file" name="file"></td>
        <tr>
        <tr>
            <td>姓名:</td>
            <td><input type="text" id="name" name="name"></td>
        <tr>
        <tr>
            <td colspan="2">
                <input type="button" id="btn" value="提交">
            </td>
        <tr>
    </table>
    <script>
        $(function () {
            $("btn").on("click",function () {
                //创建表单对象
                var form = new FormData();
                //获取表单对象
                var fileform = document.getElementsById('file').files[0];
                console.log("file=="+fileform);
                //表单对象添加内容
                //添加文件对象 文件对象名称必须与上传对象名称保持一致multipartFiles
                //form.append("multipartFiles",$("#file")[0].files[0]);
                form.append("multipartFiles",fileform);
                //添加姓名
                form.append("name",$.name.val());
                $.ajax({
                    url:'upload',
                    type:'post',
                    dataType:'json',
                    processData:false,//对上传的数据不做处理
                    contentType:false,//头文件中不要携带contentType
                    data:form,
                    success:function (data) {
                        alert(data);
                    }

                });
            })

        })
    </script>
</body>
</html>